<template>
<div style="display: inline-block;">
  <slot v-bind:toggle="toggle"></slot>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent scrollable max-width="1000px">
      <v-card>
        <v-card-title>
          <span class="headline">拼团</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row align="center">
            <label style="width: 180px;" class="text-right pr-4">成团方式：</label>
            <v-radio-group v-model="joinType" row>
              <v-radio label="成为新团" value="1"></v-radio>
              <v-radio label="拼到已有团" value="2"></v-radio>
            </v-radio-group>
          </v-row>
          <template v-show="joinType == '1'">
            <v-row align="center">
              <label style="width: 180px;" class="text-right pr-4">团号：</label>
              <div class="d-flex align-center">
                <SelectGroupcode v-model="formData.code_sign1" outlined/>
                <span class="mx-1">-</span>
                {{ dayjs(formData.plan_date).format('YYYYMMDD') }}
                <span class="mx-1">-</span>
                客户代码
              </div>
            </v-row>
            <v-row align="center" class="mt-2">
              <v-col class="d-flex align-center px-0" cols="8">
                <label style="width: 180px;" class="text-right pr-4 flex-shrink-0">接/散团日期：</label>
                <date-picker v-model="dateRange" :clearable="false" @change="handleDateChange"></date-picker>
              </v-col>
              <v-col cols="4">
                <label class="text-right pr-4">线程天数：</label>
                <span>{{day_num}}</span>
              </v-col>
            </v-row>
            <v-row align="center">
              <v-col class="d-flex align-center px-0" cols="9">
                <label style="width: 180px;" class="text-right pr-4">线路名称：</label>
                <v-text-field
                  v-model="formData.foundation_prodcut_name"
                  hide-details
                  dense
                  >
                </v-text-field>
              </v-col>
              <v-col cols="3">
                <v-btn>选择产品</v-btn>
              </v-col>
            </v-row>
          </template>
        </v-card-text>
        <el-table
          :data="items"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="code"
            label="订单号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="foundation_prodcut_name"
            label="产品名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="plan_date"
            label="接团日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="back_date"
            label="散团日期"
            width="180">
          </el-table-column>
          <el-table-column
            label="人数"
            min-width="180">
            <template slot-scope="{ row }">
              <span class="mr-2">成人X{{row.adult_num}}</span>
              <span v-if="row.bedkid_num">儿童X{{row.bedkid_num}}</span>
            </template>
          </el-table-column>
        </el-table>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text @click="dialog = false">取消</v-btn>
          <v-btn color="primary" text @click="save">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</div>
</template>

<script>
import { mergeGroup } from '@/api/group'
import SelectGroupcode from './select-groupcode'
import dayjs from 'dayjs'
export default {
  components: {
    SelectGroupcode
  },
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dialog: false,
      joinType: '1',
      dateRange: [],
      day_num: '',

      formData: {
        code_sign1: '',
        orderPlanId: [],
        id: 0,
        foundation_prodcut_id: undefined,
        foundation_prodcut_name: '',
        plan_date: '',
        back_date: '',
        day_num: ''
      }
    }
  },
  methods: {
    dayjs,
    handleDateChange(val) {
      let end = dayjs(val[1])
      let diff = end.diff(val[0])
      this.day_num = diff / 86400000 + 1
    },
    toggle() {
      if(!this.items.some(item => item.status == 2 || item.status == 3)) {
        return this.$message.warning('请选择已确认状态订单进行拼团操作')
      }
      this.dialog = !this.dialog
      if(this.dialog) {
        this.dateRange = [this.items[0]['plan_date'], this.items[0]['back_date']]
        this.day_num = this.items[0]['day_num']
        this.formData.foundation_prodcut_name = this.items[0]['foundation_prodcut_name']
        this.formData.foundation_prodcut_id = this.items[0]['foundation_prodcut_id']
        this.formData.plan_date = this.dateRange[0]
        this.formData.back_date = this.dateRange[1]
        this.formData.day_num = this.day_num
      }
    },
    save() {
      this.formData.orderPlanId = this.items.map(item => item.id)
      mergeGroup(this.formData).then(res => {
        this.$message.success('success')
        this.$emit('on-merge')
        this.dialog = false
      })
    }
  }
}
</script>

<style>

</style>